<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <link rel="stylesheet" href="css/base.css" />
        <style>
            .box-demo{
                perspective:1px;
                width: 100%;
                height: 400px;
                overflow: auto;
            }
            .container{
                height: 1200px;
                position: relative;
                transform-style:preserve-3d;
            }
            .main-bg{
                position: absolute;
                left: 50%;
                transform:translate3d(-50%,-120px,-1px) scale(2);
            }
            .icon-sidebar{
                position: absolute;
                left: 50%;
                right: 50%;
                transform: translate(-50%,-50%);
            }
            .scenery{
                width: 356px;
                height: 227px;
                background: url(img/tourism1.png) no-repeat;
                margin:150px 0 0 -400px;
            }
            .beauty{
                width: 356px;
                height: 227px;
                background: url(img/poster.png) no-repeat;
                margin:150px 0 0 400px;
            }
            .animal1{
                width: 356px;
                height: 267px;
                background: url(img/tourism2.png) no-repeat;
                margin:300px 0 0 -400px;
                transform:rotate(60deg);
            }
            .animal2{
                width: 356px;
                height: 267px;
                background: url(img/tourism2.png) no-repeat;
                margin:300px 0 0 400px;
                transform:rotate(30deg);
            }
            .container i{
                display: inline-block;
                position: absolute;
                left: 50%;
                right: 50%;
                transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>
        <div class="box-demo">
            <div class="container">
                <img src="http://www.zhangxinxu.com/study/201503/mobile_1_iphone.jpg" alt="" class="main-bg" />
                <i class="scenery"></i>
                <i class="beauty"></i>
                <i class="animal1"></i>
                <i class="animal2"></i>
            </div>
        </div>
    </body>
</html>